﻿
@model OSBLE.Models.Intervention.AvailableDetailsViewModel

@{
    string availableUntil = Model.CurrentUserStatus != null ? String.Format("{0:t}", Model.CurrentUserStatus.AvailableEndTime) : "";
    string availableUntilDate = Model.CurrentUserStatus != null ? String.Format("{0:f}", Model.CurrentUserStatus.AvailableEndTime) : "";
    if (availableUntilDate == "")
    {
        availableUntilDate = String.Format("{0:f}", DateTime.Now);
    }
    string currentUser = availableUntil == "" ? ViewBag.CurrentUserName : Model.AvailableUsers.Where(u => u.Key == Model.CurrentUserStatus.UserProfileId).FirstOrDefault().Value;
    string currentUserStatus = availableUntil == "" ? "" : Model.CurrentUserStatus.StatusMessage;
    string currentUserProfileId = availableUntil == "" ? ViewBag.CurrentUserProfileId.ToString() : Model.CurrentUserStatus.UserProfileId.ToString();    
}

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>OSBLE+ Suggestion</title>
    <link rel="shortcut icon" type="text/css" href="/Content/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/bootstrap-3.3.5/css/bootstrap.min.css")" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.1.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/bootstrap-3.3.5/js/bootstrap.min.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery-ui.css")" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")"></script>

    @* highlight.js code syntax highlighting block*@
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/themes/highlight/vs.css")" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/highlight.pack.js")"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    @* highlight.js code syntax highlighting block*@

    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/interventions.css")?version=1.0" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/Interventions.js")?version=1.01"></script>

    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.timepicker.css")" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.timepicker.js")"></script>

    @Html.Partial("_UserHashtagTagScript")

    <script type="text/javascript">
        $(document).ready(function () {

            //set the status box width to the size of the placeholder text
            var input = document.querySelectorAll('input#status-message-placeholder');
            input[0].setAttribute('size', input[0].getAttribute('placeholder').length);

            //set the chosen value if it has been loaded
            $("#chosen-time").val($(".timepicker").val());

            //initialize calendar date
            $("#datepicker").datepicker({ defaultDate: new Date("@availableUntilDate") });

            //initialize time picker
            $('.timepicker').timepicker({
                timeFormat: 'h:mm p',
                interval: 30,
                minTime: '0',
                maxTime: '23',
                //defaultTime: '17',
                startTime: '24',
                dynamic: true,
                dropdown: true,
                scrollbar: true,
                change: function (time) {
                    if (time != false) {
                        // the input field
                        var element = $(this), text;
                        // get access to this Timepicker instance
                        var timepicker = element.timepicker();
                        text = timepicker.format(time);
                        //set hidden input value
                        $("#chosen-time").val(text);
                    }
                }
            });

        });
    </script>

</head>

<body class="intervention-body">
    <div>
        <div class="panel panel-primary">
            <div class="panel-heading intervention-heading">
                <span class="left">
                    <a href="/" style="color: #FFFFFF; text-decoration: none;">
                        <span class="glyphicon glyphicon-circle-arrow-left"></span>
                        <span class="glyphicon glyphicon-dashboard"></span>
                    </a>
                </span>
                Availability Details
            </div>
            <div class="panel-body">
                @Html.Partial("_UserFeedbackPrompt", new ViewDataDictionary { { "interventionId", Model.Intervention.Id} })
                @Html.Partial("_CourseSelect")

                <h4>Other users currently available:</h4>

                <ul class="available-users-details">
                    <li class="user-availability-row">
                        <div class="checkbox" id="select-all">
                            <h5 id="available-select-all" @if (Model.AvailableUsers.Count() == 0) { <text> style="display: none;" </text>  }>
                                <input type="checkbox" class="checkbox" name="user-selected" value="-1" checked="checked"> <strong>Select All</strong>
                            </h5>
                        </div>
                    </li>
                </ul>

                <ul class="available-users-details" id="available-user-list">
                    @foreach (KeyValuePair<int, string> user in Model.AvailableUsers)
                    {
                        var status = Model.UsersStatus.Where(us => us.UserProfileId == user.Key).FirstOrDefault();
                        <li class="user-availability-row">
                            <div class="checkbox">
                                <h5>
                                    <span id="user-checkbox-@user.Key"><input type="checkbox" class="checkbox" name="user-selected" value="@user.Key" checked="checked"></span>
                                    <span id="user-image-@user.Key"><img src="/User/@user.Key/Picture?size=32" class="small_profile_picture" alt="Profile Picture" /></span>
                                    <span id="user-name-@user.Key"><strong>@user.Value:</strong></span>
                                    <span id="user-status-@user.Key">" @status.StatusMessage "</span>
                                    @{ var availableDate = String.Format("{0:g}", status.AvailableEndTime);}
                                    <span id="user-available-time-@user.Key"><em>until </em> @availableDate</span>
                                </h5>
                            </div>
                        </li>
                    }
                    @if (Model.AvailableUsers.Count() == 0)
                    {
                        <li id="no-users-available">
                            <h5>No other users currently available.</h5>
                        </li>
                    }
                </ul>

                @if (availableUntil == "")
                {
                    <h4 id="status-header">Modify Your Status (Your current status is 'unavailable') </h4>
                }
                else
                {
                    <h4 id="status-header">Modify Your Status </h4>
                }

                <div>
                    <h5>Status Message:</h5>
                    @if (Model.CurrentUserStatus != null && String.IsNullOrEmpty(Model.CurrentUserStatus.StatusMessage))
                    {
                        <input type="text" id="status-message-placeholder" placeholder="Add a status message here! (optional)" />
                    }
                    else
                    {
                        <input type="text" id="status-message-placeholder" placeholder="Add a status message here! (optional)" value="@currentUserStatus" />
                    }

                </div>
                <div>
                    <h5>Availability: </h5>
                    <div>
                        <span class="button-checkbox">
                            <button type="button" class="btn" data-color="primary" id="availability-check">You're available</button>
                            <input type="checkbox" class="hidden" checked="checked" />
                        </span>
                    </div>
                    <div id="availability-text" class="hidden">
                        <h5>Until: </h5>
                        <div style="clear:both;">
                            <div class="left">
                                <span id="datepicker"></span>
                            </div>
                            <div class="left">
                                <span style="vertical-align: middle; font-size: large; font-weight: 600; margin-left: 10px; margin-right: 10px;">@@</span>
                            </div>
                            <div class="left">
                                <input class="timepicker" value="@availableUntil" /><input type="hidden" value="" id="chosen-time" />
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear:both;" id="status-update-message"><span><em>(Updating your status will let other users know that you are open to answer questions related to the current course assignments and activities)</em></span></div>

                <div>
                    <button type="button" class="btn update-status left" id="update-status" data-color="primary">Update Status</button>
                    <span class="left" id="update-post-result"></span>
                    <span class="left" id="update-post-result-error"></span>
                </div>

                <h4 style="clear:both;">Ask these users a question: </h4>
                <div id="question-area">
                    <textarea name="ask-a-question" placeholder="Find out what people are taling about. Ask these classmates or the entire class a question!"></textarea>
                    <br />
                </div>
                <div>
                    <button class="btn btn-primary right" id="post-selected">Post Question<br /> to Selected Classmates</button>
                    <button class="btn btn-primary right" id="post-class-feed">Post Question<br /> to Class</button>
                    <button class="btn btn-default right" id="post-class-feed-anon"><span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span> Post Question<br /> to Class (Anonymously)</button>
                    <span class="right" id="post-result"></span>
                    <span class="right" id="post-success"></span>
                    <span class="right" id="post-error"></span>
                </div>
            </div>
        </div>
    </div>
    <input id="cupid" type="hidden" value="@currentUserProfileId" />
    <input id="cu-name" type="hidden" value="@currentUser" />
    <input id="iid" type="hidden" value="-2" />
    @Html.Partial("_SuggestionFeedbackModal")
</body>
</html>